<template>
  <el-container>
    <el-header height="270px" style="background-color: #F0F8F8; padding: 30px;">
      <el-scrollbar style="height:100%;overflow-x:hidden">
        <div>
          <div>
            <div class="nameClass" v-html="newTerm.name"></div>
            <div v-for="nameSourceItem of newTerm.nameSource" style="color: #959999;font-size: 10px" v-html="'《' + nameSourceItem.name + '》（' +
          CONST.TERM_SOURCE[nameSourceItem.category] + '）'"></div>
            <div v-for="(propName, prop) in CONST.TERM_STANDARD_PROPERTY"
                 v-if="UTIL.isNotEmpty(newTerm[prop]) && newTerm[prop].length > 0">
              <div class="fieldName">{{ propName }}：</div>
              <div v-if="typeof newTerm[prop] === 'string'" class="name-content" v-html="newTerm[prop]"></div>
              <div v-else class="name-content" v-html="UTIL.arrayToStr(newTerm[prop], 'value', ';')"></div>
            </div>
            <hr style="margin-left: 0px; margin-top: 20px; width: 60%;"/>
            <div v-if="newTerm.explanation.length > 0">
              <div class="fieldName">释义：</div>
              <div v-for="item in newTerm.explanation" style="margin-top: 15px;">
                <div v-html="item.value"></div>
                <div
                  style="margin-top:5px;margin-bottom:20px;color: #959999;font-size: 10px; width: 65%;text-align: right;">
                  <div class="line vertical-align-top knowledge-source">{{ item.name }} -</div>
                  <div v-if="UTIL.isNotEmpty(item.version)" class="line vertical-align-top knowledge-source">
                    {{ item.version }} -
                  </div>
                  <div class="line vertical-align-top knowledge-source">{{ item.isbn }}</div>
                </div>
              </div>
            </div>
          </div>
        </div> <!-- 知识内容 -->
      </el-scrollbar>
    </el-header>
    <br>
    <el-main style="background-color: #F0F8F8;height: 300px;padding: 5px;overflow-x: hidden">
      <el-scrollbar style="height:100%;overflow:hidden">
        <el-row>
          <el-col :span="12" style="border-right: 1px solid #7D8080;padding: 10px">
            <div>
              <div style="text-align: center;font-weight: bold;margin-bottom: 10px">
                <span>修改前</span>
              </div>
              <div>
                <div class="nameClass" v-html="oldTerm.name"></div>
                <div v-for="nameSourceItem of oldTerm.nameSource" style="color: #959999;font-size: 10px" v-html="'《' + nameSourceItem.name + '》（' +
          CONST.TERM_SOURCE[nameSourceItem.category] + '）'"></div>
                <div v-for="(propName, prop) in CONST.TERM_STANDARD_PROPERTY"
                     v-if="UTIL.isNotEmpty(oldTerm[prop]) && oldTerm[prop].length > 0">
                  <div class="fieldName">{{ propName }}：</div>
                  <div v-if="typeof oldTerm[prop] === 'string'" class="name-content" v-html="oldTerm[prop]"></div>
                  <div v-else class="name-content" v-html="UTIL.arrayToStr(oldTerm[prop], 'value', ';')"></div>
                </div>
                <div v-if="oldTerm.explanation.length > 0">
                  <div class="fieldName">释义：</div>
                  <div v-for="item in oldTerm.explanation">
                    <div v-html="item.value"></div>
                    <div style="margin:10px;color: #959999;font-size: 10px">
                      <div class="line vertical-align-top knowledge-source">{{ item.name }} -</div>
                      <div v-if="UTIL.isNotEmpty(item.version)" class="line vertical-align-top knowledge-source">
                        {{ item.version }} -
                      </div>
                      <div class="line vertical-align-top knowledge-source">{{ item.isbn }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div> <!-- 知识内容 -->

          </el-col>
          <el-col :span="12" style="padding: 10px;">
            <div>
              <div style="text-align: center;font-weight: bold;margin-bottom: 10px">
                <span>修改后</span>
              </div>
              <div>
                <div class="nameClass" v-html="newTerm.name"></div>
                <div v-for="nameSourceItem of newTerm.nameSource" style="color: #959999;font-size: 10px" v-html="'《' + nameSourceItem.name + '》（' +
          CONST.TERM_SOURCE[nameSourceItem.category] + '）'"></div>
                <div v-for="(propName, prop) in CONST.TERM_STANDARD_PROPERTY"
                     v-if="UTIL.isNotEmpty(newTerm[prop]) && newTerm[prop].length > 0">
                  <div class="fieldName">{{ propName }}：</div>
                  <div v-if="typeof newTerm[prop] === 'string'" :style="{color: newTerm[prop + 'Color']}"
                       class="name-content" v-html="newTerm[prop]"></div>
                  <div v-else :style="{color: newTerm[prop + 'Color']}"
                       class="name-content"
                       v-html="UTIL.arrayToStr(newTerm[prop], 'value', ';')"></div>
                </div>
                <div v-if="newTerm.explanation.length > 0">
                  <div class="fieldName">释义：</div>
                  <div v-for="item in newTerm.explanation">
                    <div
                      :style="{color:(oldTerm.explanation.find(itemExplain => itemExplain.value === item.value) ? 'black' : 'red')}"
                      class="name-content" v-html="item.value"></div>
                    <div style="margin:10px;color: #959999;font-size: 10px">
                      <div class="line vertical-align-top knowledge-source">{{ item.name }} -</div>
                      <div v-if="UTIL.isNotEmpty(item.version)" class="line vertical-align-top knowledge-source">
                        {{ item.version }} -
                      </div>
                      <div class="line vertical-align-top knowledge-source">{{ item.isbn }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div> <!-- 知识内容 -->
          </el-col>
        </el-row>
      </el-scrollbar>
    </el-main>
  </el-container>

</template>

<script>
export default {
  name: "TermManualCreat",
  props: {
    id: String,
    list: Array
  },
  data() {
    return {
      oldTerm: {
        explanation: []
      },
      newTerm: {
        explanation: []
      },
    }
  }, methods: {
    changeVersion() {
      this.newTerm = this.list.find(item => item.id === this.id)
      this.oldTerm = this.list.find(item => item.version === this.newTerm.version - 1)

      this.setPropColor()
    },
    setPropColor() {
      for (let prop in CONST.TERM_STANDARD_PROPERTY) {
        if (this.newTerm[prop].length !== this.oldTerm[prop].length) {
          this.$set(this.newTerm, prop + 'Color', 'red')
        }
      }
    }
  },
  mounted() {
    this.changeVersion()
  },
  watch: {
    id() {
      this.changeVersion()
    }
  },
}
</script>

<style scoped>
.nameClass {
  font-size: 16px;
  font-weight: bold;
}

.name-content {
  font-size: 16px;
  display: inline-block;

}

.fieldName {
  font-family: MicrosoftYaHei-Bold, sans-serif;
  font-size: 16px;
  color: #333333;
  letter-spacing: 0;
  display: inline-block;
  margin-top: 15px;
}

/deep/ .el-scrollbar__wrap {
  overflow: auto;
}

.line {
  display: inline-block;
}
</style>
